<template>
  <div>
    <!-- 头部搜索 -->
    <div class="divHead">
      <!-- 输入框 -->
      <el-row style="width:80%">
        <el-col :span="8" class="el-col">
          <div>{{ nameList[0] }}</div>
          <el-input v-model="forms.one" placeholder="请输入内容" />
        </el-col>
        <el-col :span="8" class="el-col">
          <div>{{ nameList[1] }}</div>
          <el-input v-model="forms.tow" placeholder="请输入内容" />
        </el-col>
        <el-col :span="8" class="el-col">
          <div>{{ nameList[2] }}</div>
          <el-select v-model="forms.status" placeholder="请选择" style="width: 370px;">
            <el-option label="全部" :value="null" />
            <el-option label="停用" :value="0" />
            <el-option label="启用" :value="1" />
          </el-select>
        </el-col>
      </el-row>
      <!-- 按钮 -->
      <div style="margin-top:12px">
        <el-button type="warning" round @click="search">搜索</el-button>
        <el-button round @click="reset">重置</el-button>
      </div>
    </div>
    <!-- 表格内容 -->
    <!-- 表格内容 -->
    <div class="divContent">
      <el-button type="success" round style="margin-bottom:20px" @click="add">新增仓库</el-button>
      <el-table
        size="mini"
        class="tableBox"
        :stripe="true"
        :data="tableData"
        border
        style="width: 100%;"
      >
        <el-table-column
          fixed
          type="index"
          label="序号"
          width="150"
        />
        <el-table-column
          v-for="(item,index) in arr"
          :key="index"
          style="padding:0"
          :prop="titleObj[item]"
          :label="item"
          width="160"
        >
          <template v-if="item ==='仓库类型'" #default="{row}">
            {{ storehouseType[row.type] }}
          </template>
          <template v-else-if="item ==='仓库状态'||item ==='库区状态'||item ==='停用状态'" #default="{row}">
            {{ statusType[row.status] }}
          </template>
          <template v-else-if="item ==='温度类型'" #default="{row}">
            {{ temperature[row.temperatureType] }}
          </template>
          <template v-else-if="item ==='承重类型'" #default="{row}">
            {{ bearType[row.bearingType] }}
          </template>
          <template v-else-if="item ==='用途属性'" #default="{row}">
            {{ useType[row.useType] }}
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="200"
        >
          <template #default="{row}">
            <el-button type="text" size="small" @click="add(row)">编辑</el-button>
            <el-button v-if="row.status !== 0" type="text" size="small" @click="$emit('use',row)">停用</el-button>
            <el-button v-else type="text" size="small" @click="$emit('use',row)">启用</el-button>
            <el-button type="text" size="small" @click="delite(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 底部页签 -->
      <div class="bottom">
        <span style="margin-top:10px;margin-right:20px">共{{ dataMax.total }}条</span>
        <el-select v-model="forms.size" style="width:100px;height:28px;margin-right:20px" @change="publicFn">
          <el-option label="10条/页" :value="10" />
          <el-option label="20条/页" :value="20" />
          <el-option label="30条/页" :value="30" />
          <el-option label="40条/页" :value="40" />
        </el-select>
        <el-pagination
          layout="prev, pager, next"
          :total="dataMax.total*1"
          @prev-click="prev"
          @next-click="next"
          @current-change="sizeChange"
        />
        <div style="margin-left:20px">
          前往
          <el-input v-model="forms.current" class="ipt" @blur="publicFn(forms)" />
          页
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Item',
  props: {
    nameList: {
      type: Array,
      default: () => {}
    },
    tableData: {
      type: Array,
      default: () => {}
    },
    dataMax: {
      type: Object,
      default: () => {}
    },
    titleObj: {
      type: Object,
      default: () => {}
    },
    arr: {
      type: Array,
      default: () => {}
    }
  },
  data() {
    return {
      forms: {
        one: '', // 第一个输入框
        tow: '', // 第二个输入框
        status: '', // 状态
        current: 1, // 页
        size: 10 // 数量
      },
      statusType: {
        0: '停用',
        1: '启用'
      },
      storehouseType: {
        ZZ: '中转仓',
        JG: '加工仓',
        CB: '储备仓',
        LC: '冷藏仓'
      },
      temperature: {
        CW: '常温',
        LC: '冷藏',
        HW: '恒温'
      },
      bearType: {
        ZX: '重型',
        BX: '中型',
        QX: '轻型'
      },
      useType: {
        RKHCQ: '入库缓存区',
        CKHCQ: '出库缓存区',
        CCQ: '存储区',
        FJQ: '分拣区',
        ZJQ: '质检区'
      }
    }
  },
  // created() {
  //   this.$emit('publicFn', this.forms)
  // },
  methods: {
    publicFn(forms) {
      this.$emit('publicFn', forms)
    },
    submit() {
      this.$emit('submit')
    },
    search() {
      // 搜索
      this.$emit('publicFn', this.forms)
    },
    reset() {
      // 重置
      this.forms = {
        one: '', // 第一个输入框
        tow: '', // 第二个输入框
        status: null, // 状态
        current: 1, // 页
        size: 10 // 数量
      }
    },
    prev(a) {
      this.forms.current = a
      this.$emit('publicFn', this.forms)
    },
    next(a) {
      this.forms.current = a
      this.$emit('publicFn', this.forms)
    },
    sizeChange(a) {
      this.forms.current = a
      this.$emit('publicFn', this.forms)
    },
    add(row) {
      this.$emit('add', row, this.tableData)
    }

  }
}
</script>

<style lang="scss">
.divHead{
    display: flex;
    height: 127px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 0 6px 0 rgb(144 142 142 / 17%);
    padding: 30px;
    margin-bottom: 20px;
    .el-col{
      margin-right: 20px;
      width: 370px;

    }
  }
    .divContent{
    padding: 20px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 0 6px 0 rgb(144 142 142 / 17%);
    // height: 449px;
  }
  .bottom{
    margin-top: 20px;
    display: flex;
    text-align: center;
    margin-left: 480px;
  }
  .ipt{
    width: 40px;
    height: 20px;
  }
  .divHead{
    div {
      font-size: 12px;
      color: #887e7e;
      margin-bottom: 12px;
    }
  }
</style>
